<template>
  <div class="container">
    <div class="title">
      <el-checkbox-group v-model="checkList" @change="changeLayout">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="layoutChange" :class="{doubleSourceFlexLayout: checkList.length === 2, tribbleSource: checkList.length === 3}">
    <div class="source" v-for="val in checkList" :key="val.index" :class="{doubleSource: checkList.length === 2}">
      1号
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      checkList: ['A']
    }
  },
  created () {
  },
  watch: {
    checkList: {
      handler (values) {
        if (!values.length) return
        if (values.length === 1) {
          const mySource = document.querySelector('.layoutChange').firstElementChild
          console.log('第一个元素', mySource)
        } else if (values.length === 3) {
          this.$nextTick(() => {
            const layoutChangeHeight = document.querySelector('.layoutChange').offsetHeight
            const mySources = document.querySelector('.layoutChange').querySelectorAll('.source')
            const firstWidth = mySources[0].offsetWidth
            const firstHight = mySources[0].offsetHeight
            for (let i = 0; i < mySources.length; i++) {
              if (i >= 1) {
                mySources[i].style.width = (firstWidth / 2) + 'px'
                // mySources[i].style.height = (mySources[i].offsetWidth) * (9 / 16) + 'px'
                mySources[i].style.height = (layoutChangeHeight - firstHight) + 'px'
                mySources[i].style.display = 'inline-block'
              }
            }
            mySources[1].style.backgroundColor = 'blue'
            mySources[2].style.backgroundColor = 'pink'
          })
        } else if (values.length === 2) {
          this.$nextTick(() => {
            // const layoutChangeHeight = document.querySelector('.layoutChange').offsetHeight
            // const layoutChangeWidth = document.querySelector('.layoutChange').offsetWidth
            const doubleSource = document.querySelectorAll('.source')
            console.log('两个元素的盒子', doubleSource)
            for (let i = 0; i < doubleSource.length; i++) {
              // doubleSource[i].style.width = (layoutChangeHeight / 2) + 'px'
              // doubleSource[i].style.height = (layoutChangeWidth / 2) + 'px'
              doubleSource[i].style = null
              // doubleSource[i].classList.add = 'doubleSource'
            }
          })
        }
      }
    }
  },
  methods: {
    changeLayout (value) {
      console.log('哈哈哈哈', value)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 800px;
  height: 600px;
  background-color: #333339;
  .title {
    width: 100%;
    background-color: pink;
  }
  .layoutChange {
    width: 100%;
    height: calc(100% + 20px);
    .source {
    width: 80%;
    height: 75%;
    background-color: red;
    margin: 0 auto;
    }
    .doubleSource {
      width: 50%;
      height: 50%;
    }
  }
  .doubleSourceFlexLayout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>
